<template>
  <view class="entire">
    <view class="top">
      <view class="left">{{ topic.title }}</view>
      <image :src="topic.picture" class="right" mode="aspectFill" />
    </view>
    <divider />
    <view class="bottom">
      <view class="left">
        <view class="text">
          <text style="color: #254872; font-size: 25rpx">{{ topic.done }}</text>
          /{{ topic.total }}
        </view>
        <progress
          :percent="(topic.done / topic.total) * 100"
          stroke-width="5"
          activeColor="#254872"
        />
      </view>
      <view class="right" v-if="topic.done / topic.total !== 1">
        <wd-icon name="hourglass" size="30rpx" />
        进行中
      </view>
      <view class="right" v-if="topic.done / topic.total === 1">
        <wd-icon name="check1" size="30rpx" />
        已完成
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  topic: { type: Object, required: true },
})
</script>

<style scoped lang="scss">
.entire {
  width: 700rpx;
  height: 280rpx;
  background-color: white;
  border-radius: 15rpx;
  margin-left: 25rpx;
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  .top {
    width: 700rpx;
    height: 200rpx;
    display: flex;
    justify-content: space-between;
    .left {
      margin-left: 30rpx;
      margin-top: 50rpx;
      width: 300rpx;
      height: 120rpx;
      font-size: 25rpx;
      font-weight: bold;
    }
    .right {
      margin-right: 15rpx;
      margin-top: 15rpx;
      overflow: hidden;
      width: 300rpx;
      height: 170rpx;
      border-radius: 15rpx;
    }
  }
  .bottom {
    width: 700rpx;
    height: 80rpx;
    display: flex;
    .left {
      margin-left: 30rpx;
      width: 400rpx;
      height: 50rpx;
      display: flex;
      flex-direction: column;
      .text {
        display: flex;
        font-size: 23rpx;
        font-weight: bold;
        margin-left: 370rpx;
        color: #cfd9e2;
      }
    }
    .right {
      margin-top: 22rpx;
      margin-left: 70rpx;
      width: 120rpx;
      height: 36rpx;
      border-radius: 18rpx;
      background-color: #e5effd;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 21rpx;
      font-weight: bolder;
      color: #000000;
    }
  }
}
</style>
